/* 学员信息页面思路分析
1.默认加载学员信息列表 
2.添加学员 ：bootstrap模态框
3.省市县三级联动
4.确认添加 : 发送ajax请求
5.重置添加弹窗
6.删除学员信息
7.修改学员信息

本页面三个难点
难点1 ： 省市县三级联动 逻辑复杂
难点2 ： 表单较多，需要单独封装函数获取参数
难点3 ： 新增和编辑复用一个模态框， 一个按钮实现两种业务
    新增 ： (1)获取表单数据 (2)发送新增ajax请求
    编辑 ： (1)将点击的当前数据渲染到表单上 (2)获取表单数据 (3)发送编辑ajax请求
*/


/* 1.默认加载学员信息列表 */
const initData = () => {
    axios({
        url: '/student/list',
        method: 'get'
    }).then(res => {
        console.log(res)
        // 获取成功
        if (res.data.code == 0) {
            // 渲染数组
            document.querySelector('tbody').innerHTML = res.data.data.map(item => `
                <tr>
                    <th scope="row">${item.id}</th>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td>${item.group}</td>
                    <td>${item.phone}</td>
                    <td>${item.salary}</td>
                    <td>${item.truesalary}</td>
                    <td>${item.province + item.city + item.county}</td>
                    <td>
                        <button type="button" data-id="${item.id}" class="update btn btn-primary btn-sm">修改</button>
                        <button type="button" data-id="${item.id}" class="delete btn btn-danger btn-sm">删除</button>
                    </td>
                </tr>
                `).join('')
        }
    })
}

//调用函数
initData()

/* 2.添加学员 ：出现弹窗 */
document.querySelector('.btnAddStu').addEventListener('click', function () {
    //(1)设置模态框标题和按钮文字
    document.querySelector('.addModalLabel').innerHTML = '录入新学员'
    document.querySelector('.btnAddStudent').innerText = '确认添加'
    //(2)展示模态框
    $('#addModal').modal('show')
    //(3)渲染省列表
    initProvince()
})

/* 3.省市县三级联动 
(1)加载省条件 : 点击添加学员，出现弹窗后。默认加载省
(2)加载市条件 : 用户选择了某一个省
(3)加载县条件 : 用户选择了某一个市
*/

//3.1 省联动
//这个功能需要先弹出模态框才能使用，而不是一开始就默认加载。  因此可以封装成函数调用
const initProvince = () => {
    axios({
        url: '/geo/province',
        method: 'get'
    }).then(res => {
        console.log(res)
        //(1)先生成option标签
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`);
        //(2)在数组最前面添加默认option标签
        arr.unshift(`<option selected value="">--省--</option>`);
        //(3)渲染
        document.querySelector('[name="province"]').innerHTML = arr.join("")
    })
}

//3.2 市联动 ： 监听省变化
//监听select标签的选择事件: onchange
document.querySelector('[name="province"]').addEventListener('change', function () {
    //(1)如果省变了,则市和县就要恢复默认
    document.querySelector('[name="city"]').innerHTML = `<option selected value="">--市--</option>`
    document.querySelector('[name="county"]').innerHTML = `<option selected value="">--区/县--</option>`
    //(2)非空判断
    if (this.value == '') {
        return
    }
    //(3)发送ajax请求
    axios({
        url: '/geo/city',
        method: 'get',
        params: {
            pname: this.value
        }
    }).then(res => {
        //(1)先生成option标签
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        //(2)在数组最前面添加默认option标签
        arr.unshift(`<option selected value="">--市--</option>`)
        //(3)渲染
        document.querySelector('[name="city"]').innerHTML = arr.join("")
    })
})

//3.3 县联动 : 监听市变化
//监听select标签的选择事件: onchange
document.querySelector('[name="city"]').addEventListener('change', function () {
    //(1)如果市变了,则县就要恢复默认
    document.querySelector('[name="county"]').innerHTML = `<option selected value="">--区/县--</option>`
    //(2)非空判断
    if (this.value == '') {
        return
    }
    //(3)发送ajax请求
    axios({
        url: '/geo/county',
        method: 'get',
        params: {
            pname: document.querySelector('[name="province"]').value,
            cname: this.value
        }
    }).then(res => {
        //(1)先生成option标签
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        //(2)在数组最前面添加默认option标签
        arr.unshift(`<option selected value="">--区/县--</option>`)
        //(3)渲染
        document.querySelector('[name="county"]').innerHTML = arr.join("")
    })
})

/* 4.确认添加 : 发送ajax请求 */

document.querySelector('.btnAddStudent').addEventListener('click', function (e) {
    //0.表单按钮需要阻止默认跳转
    e.preventDefault()
    //获取所有的表单
    let inputList = document.querySelectorAll('form input')
    //1.非空判断(正则验证服务器会处理)
    if (Array.from(inputList).some(item => item.value == '')) {
        Toast.info('输入框不能为空')
        return
    }
    //2.获取表单参数
    /* FormData有两种使用方式 
    第一种: 一般用于文件上传
        (1)先创建一个空的FormData:  let fd = new FormData()
        (2)使用append()添加参数:  fd.append('参数名',参数值)
    第二种: 一键获取form表单所有参数
        let fd = new FormData( form元素 )
        (1)参数必须是form标签,其他标签会报错。  
        (2)fd底层自动帮我们遍历form里面的每一个表单, 将name属性作为参数名,value作为参数值
    */
    let fd = new FormData(document.querySelector('.add-form'))
    let data = {}
    fd.forEach(function (value, key) {
        data[key] = value
    })
    //判断是新增还是编辑
    let url = '/student/add'
    let method = 'post'
    //编辑ajax与新增ajax不同的地方: (1)路径不同  (2)请求方法不同  (3)多了一个参数id
    if (this.innerText == '确认编辑') {
        url = '/student/update'
        method = 'put'
        data.id = this.dataset.id
    }

    console.log(data)
    //3.ajax发送请求
    axios({
        url,
        method,
        data
    }).then(res => {
        // 添加成功,重新渲染列表
        if (res.data.code == 0) {
            // a.清空表单  
            document.querySelector(".add-form").reset()
            // b.关闭弹窗
            document.querySelector("#addModal .btn-close").click()
            // c.成功提示
            Toast.success(res.data.message)
            // d.重新加载列表
            initData()
        }
    }).catch(err => {
        //错误弹窗提示
        Toast.fail(err.response.data.message)
        //清空控制台爆红
        setTimeout(()=>{
            console.clear()
        },3000)
    })
})

/* 5.重置添加弹窗 :  通过设置按钮type="reset"  点击重置按钮会自动重置 */

/* 6.删除学生信息 ： 动态新增的元素，需要注册委托事件
*/
document.querySelector('tbody').addEventListener('click', function (e) {
    //删除学生信息
    if (e.target.classList.contains('delete')) {
        let id = e.target.dataset['id']
        //发送ajax删除学员
        axios({
            url: '/student/delete',
            method: 'delete',
            params: { id }
        }).then(res => {
            if (res.data.code == 0) {
                Toast.success('删除成功')
                //重新加载列表
                initData()
            }
        })
    }
})

/* 7.修改学生信息 ： 动态新增的元素，需要注册委托事件
*/
document.querySelector('tbody').addEventListener('click', function (e) {
    //修改学生信息
    if (e.target.classList.contains('update')) {
        //1.弹出模态框
        //(1)设置模态框标题和按钮文字
        document.querySelector('.addModalLabel').innerHTML = '修改学员信息'
        document.querySelector('.btnAddStudent').innerText = '确认编辑'
        //(2)把学员的id添加给编辑按钮,因为编辑的ajax需要发送学员的id
        document.querySelector('.btnAddStudent').dataset.id = e.target.dataset['id']
        //(3)展示模态框
        $('#addModal').modal('show')
        //(4)渲染省列表
        initProvince()

        //2.发送ajax单独请求一个学员信息
        axios({
            url: '/student/one',
            method: 'get',
            params: { id: e.target.dataset['id'] }
        }).then(res => {
            if (res.data.code == 0) {
                let data = res.data.data
                console.log(data)
                //3. 填充表单数据
                document.querySelector('[name="name"]').value = data.name
                document.querySelector('[name="age"]').value = data.age
                document.querySelector('[name="group"]').value = data.group
                // 性别
                if (data.sex == '男') {
                    document.querySelectorAll('[name="sex"]')[0].checked = true
                } else {
                    document.querySelectorAll('[name="sex"]')[1].checked = true
                }
                document.querySelector('[name="phone"]').value = data.phone
                document.querySelector('[name="salary"]').value = data.salary
                document.querySelector('[name="truesalary"]').value = data.truesalary
                //省数据在弹窗出现的时候会自动加载，所以 能够直接修改value
                document.querySelector('[name="province"]').value = data.province
                //市和县需要单独渲染
                document.querySelector('[name="city"]').innerHTML = `<option selected value="${data.city}">${data.city}</option>`
                document.querySelector('[name="county"]').innerHTML = `<option selected value="${data.county}">${data.county}</option>`
            }

        })
    }
})

